<template>
	<page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<!-- 我的 -->
	<view class="mine-container">
		<view class="login">
			<!-- 		<view class="pending" v-if="userInfo&& userInfo.checkStatus==1">
				审 核 中
			</view>
			<view class="rejected" v-if="userInfo&&userInfo.checkStatus==3">
				审核不通过
			</view> -->
			<view v-if="userInfo" class="has_login">
				<view class="avatar">
					<open-data type="userAvatarUrl"></open-data>
				</view>
				<!-- <navigator :url="'../editAvatar/editAvatar?id='+userInfo.headurl">
					<view class="avatar">
						<image v-if="!avatarUrl" src="../../static/icon/213.jpg"></image>
						<image v-else :src="avatarUrl" mode=""></image>
					</view>
				</navigator> -->
				<view class="userinfo">
					<view class="name">{{ userInfo.name }}</view>
					<view class="phone">{{ userInfo.mobile }}</view>
					<view class="date">{{ userInfo.projName }}</view>
					<view v-if="userInfo && userInfo.checkStatus == 1" style="color: #ffff7f;">
						审 核 中
					</view>
					<view v-if="userInfo && userInfo.checkStatus == 3" style="color: #ff0000;">
						审核未通过
					</view>
				</view>
				<!-- <view class="change" @click="handleTap('picker1')">切换小区</view>

				<lb-picker ref="picker1" :value="list.find(x=>x.id == projId).value" mode="selector" :list="list" :dataset="{ name: 'label1' }"
				 @change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker> -->
			</view>
			<view v-else class="no_login" @click="wxLogin">登录</view>
		</view>

		<view class="my-nav">
			<view class="nav-title">常用功能</view>
			<view class="nav-content">
				<view class="nav-item" @click="goNavigate('../right/right')">
					<view class="item-img">
						<image src="../../static/icon/m1.png" mode=""></image>
					</view>
					<text>授权管理</text>
				</view>
				<navigator url="../pointDetail/pointDetail" class="nav-item">
					<view class="item-img">
						<image src="../../static/icon/m2.png" mode=""></image>
					</view>
					<text>积分明细</text>
				</navigator>
				<navigator url="../userinfo/userinfo" class="nav-item">
					<view class="item-img">
						<image src="../../static/icon/m3.png" mode=""></image>
					</view>
					<text>个人信息</text>
				</navigator>
			</view>
		</view>

		<!-- <navigator url="../myDevice/myDevice">
			<view class="info-item">
				<view class="icon-item">
					<image src="../../static/icon/shouji.png"></image>
				</view>
				<text>我的设备</text>
				<view class="arrow"></view>
			</view>
		</navigator> -->

		<navigator url="../release/release" class="info-item">
			<view class="icon-item">
				<image src="../../static/icon/m5.png"></image>
			</view>
			<text>投放记录</text>
			<view class="arrow"></view>
		</navigator>

		<navigator url="../../ticketSystem/recordCenter/recordCenter" class="info-item">
			<view class="icon-item">
				<image src="../../static/icon/m6.png"></image>
			</view>
			<text>报事记录</text>
			<view class="arrow"></view>
		</navigator>
		<navigator url="/ticketSystem/feedBackRecord/feedBackRecord" class="info-item">
			<view class="icon-item">
				<image src="../../static/icon/m6.png"></image>
			</view>
			<text>意见反馈记录</text>
			<view class="arrow"></view>
		</navigator>
		<!-- <navigator url="../feedback/feedback">
			<view class="info-item">
				<view class="icon-item">
					<image src="../../static/icon/6.png"></image>
				</view>
				<text>反馈记录</text>
				<view class="arrow"></view>
			</view>
		</navigator> -->
		<!-- <navigator url="../subscribeMessage/subscribeMessage">
			<view class="info-item">
				<view class="icon-item">
					<image src="../../static/icon/6.png"></image>
				</view>
				<text>消息订阅</text>
				<view class="arrow"></view>
			</view>
		</navigator> -->
		<!-- 		<navigator url="../subscribeMessage/subscribeMessage">
			<view class="info-item">
				<view class="icon-item">
					<image src="../../static/icon/m4.png"></image>
				</view>
				<text>投票记录</text>
				<view class="arrow"></view>
			</view>
		</navigator>
		<navigator url="../subscribeMessage/subscribeMessage">
			<view class="info-item">
				<view class="icon-item">
					<image src="../../static/icon/m7.png"></image>
				</view>
				<text>调查记录</text>
				<view class="arrow"></view>
			</view>
		</navigator> -->

		<navigator url="/visitor/index/index?current=2">
			<view class="info-item">
				<view class="icon-item">
					<image src="../../static/icon/m9.png"></image>
				</view>
				<text>访客预约记录</text>
				<view class="arrow"></view>
			</view>
		</navigator>
		<view class="info-item" @click="this.$store.state.fontSize == 6 ? this.$store.state.fontSize = 3.8 : this.$store.state.fontSize = 6">
			<view class="icon-item">
				<van-icon name="exchange" style="font-size: 40rpx;color: #4C91FF;"/>
			</view>
			<text>{{ fontSize == 6 ? '切换标准版' : '切换关怀版'}}</text>
			<view class="arrow"></view>
		</view>
		<!-- <navigator url="../subscribeMessage/subscribeMessage">
			<view class="info-item">
				<view class="icon-item">
					<image src="../../static/icon/m10.png"></image>
				</view>
				<text>车辆管理记录</text>
				<view class="arrow"></view>
			</view>
		</navigator> -->
		<!-- <navigator url="../subscribeMessage/subscribeMessage">
			<view class="info-item">
				<view class="icon-item">
					<image src="../../static/icon/m8.png"></image>
				</view>
				<text>活动记录</text>
				<view class="arrow"></view>
			</view>
		</navigator> -->
		<!-- <navigator url="../subscribeMessage/subscribeMessage">
			<view class="info-item">
				<view class="icon-item">
					<image src="../../static/icon/m11.png"></image>
				</view>
				<text>网格事件记录</text>
				<view class="arrow"></view>
			</view>
		</navigator> -->
		<!-- <view class="info-item" @click="logout">
			<view class="icon-item">
				<image src="../../static/icon/login.png"></image>
			</view>
			<text>退出登录</text>
			<view class="arrow"></view>
		</view> -->

	</view>
</template>

<script>
import LbPicker from '@/components/lb-picker'
import { mapState } from 'vuex'

export default {
	components: {
		LbPicker
	},
	computed: {
		...mapState(['fontSize'])
	},
	data() {
		return {
			list: [],
			params: {
				pagination: {
					current: 1,
					pageSize: 10000
				},
				sorter: {
					field: "id",
					order: 0
				},
				projType: this.$config.projType,
				guId: this.$config.groupId
			},
			projId: null,
			userInfo: {},
			avatarUrl: null
		}
	},

	onShow() {
		// let temps = uni.getStorageSync('temps')
		// if (temps && JSON.stringify(temps) == JSON.stringify(this.$config.temps)) {

		// } else {
		// 	let that = this
		// 	uni.showModal({
		// 		title: '提示',
		// 		content: '是否接收工单消息通知',
		// 		success: (res) => {
		// 			if (res.confirm) {
		// 				wx.requestSubscribeMessage({
		// 					tmplIds: that.$config.temps.map(t=>t.id),
		// 					success: (res) => {
		// 						console.log('xxxx', res)
		// 						uni.setStorageSync('temps', that.$config.temps)
		// 					}
		// 				})
		// 			} else if (res.cancel) {
		// 				noted = false
		// 				console.log('用户点击取消');
		// 			}
		// 		}
		// 	});

		// }

		this.projId = uni.getStorageSync('projId')
		this.userInfo = uni.getStorageSync('userInfo')
		if (!this.userInfo.id) {
			this.wxLogin()
		} else {
			this.getUserInfo()
			this.getProjectList()
		}


	},
	async onPullDownRefresh() {
		await this.getUserInfo()
		await this.getProjectList()
		uni.stopPullDownRefresh();
		// console.log('refresh');
		// setTimeout(function() {
		// 	uni.stopPullDownRefresh();
		// }, 1000);
	},
	methods: {

		wxLogin() {
			uni.showModal({
				title: '您还未登陆,请先登陆后使用',
				success: res => {
					if (res.confirm) {
						uni.navigateTo({
							url: '../login/login'
						})
					} else if (res.cancel) {
						console.log('触发咯')
						uni.switchTab({
							url: '../index/index'
						})
					}
				}
			})
			// uni.login({
			// 	provider: 'weixin',
			// 	success: res => {
			// 		console.log('res', res.code)
			// 		if (res.code) {
			// 			console.log('获取微信code', res.code)
			// 			this.code2login(res.code)

			// 		} else {
			// 			console.log('微信登录失败！' + res.errMsg)
			// 		}
			// 	}
			// })
		},
		code2login(code) {
			this.$http.post('auth/wx/code2login', {
				groupId: this.$config.groupId,
				code: code,
				authType: 1 //业主
			}).then(res => {
				if (res.code === 10000) {
					console.log("xxx")
					this.getUserInfo()
				} else if (res.code === 50004) {
					uni.setStorageSync('authKey', res.data.authkey)
					uni.showToast({
						title: '用户未注册',
						icon: 'none'
					})
					uni.navigateTo({
						url: "../phone/phone"
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})

		},

		// 下载文件
		downAvatar() {
			this.$http.post('common/file/download', {
				id: uni.getStorageSync('userInfo').headurl
			}).then(res => {
				if (res.code === 10000) {
					this.avatarUrl = res.data.fileData
				}
			})
		},
		handleTap(name) {
			uni.hideTabBar({
				animation: true
			})
			this.getProjectList()
			this.$refs[name].show()
		},
		handleChange(e) {
			console.log('change::', e)
		},
		handleConfirm(e) {
			// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
			uni.showTabBar({
				animation: true
			})
			uni.showModal({
				title: '提示',
				content: '您确定要切换到' + e.item.label + '吗?',
				success: (res) => {
					if (res.confirm) {
						console.log('confirm::', e)
						if (e) {
							this.projId = e.item.id
							this.getUserInfo()
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		handleCancel(e) {
			uni.showTabBar({
				animation: true
			})
			console.log('cancel::', e)
		},
		// 获取小区列表
		getProjectList() {
			this.$http2.post('/sys/project/list', this.params).then(res => {
				if (res.code === 10000) {
					this.list = res.data.list
					//项目列表设置到storage
					uni.setStorageSync('projList', this.list)
				}
			})
		},
		// 查询用户信息
		getUserInfo() {
			this.$http.post('common/user/info', {
				projId: this.projId || null,
				groupId: this.$config.groupId
			}).then(res => {
				console.log(res, 123)
				if ([10000, 50014, 50015].includes(res.code)) {
					this.userInfo = res.data
					uni.setStorageSync('projId', res.data.projId)
					uni.setStorageSync('userInfo', res.data)
					if (this.userInfo.picture) {
						this.downAvatar()
					}
					if (res.code === 50014) {
						// uni.showModal({
						// 	title: '提示',
						// 	content: '当前小区注册信息处于待审核状态,部分功能将不可用,请尽快前往小区物业进行审核',
						// 	showCancel: false,
						// 	success: function(res) {
						// 		if (res.confirm) {
						// 			console.log('点击确定')
						// 		}
						// 	}
						// });
					}
					if (res.code === 50015) {
						uni.showModal({
							title: '提示',
							content: '当前小区注册信息未通过审核,请重新完善个人信息',
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '../userinfo/userinfo'
									})
								}
							}
						});
					}

				}

				if (res.code === 50013) {
					uni.showModal({
						title: '提示',
						content: '当前小区用户不存在,请前往注册',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '../register/register?projId=' + this.projId
								})
							}
						}
					});
				}
			})
		},

		logout() {
			uni.showModal({
				title: '提示',
				content: '确认退出登录吗?',
				success: (res) => {
					if (res.confirm) {
						// this.onLoginOut()
						uni.clearStorageSync()

					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		goNavigate(url) {

			if (!uni.getStorageSync('userInfo')) {
				uni.showModal({
					title: '您还未登陆,请先登陆后使用'
				})
				return
			}
			if (url == '../right/right' && uni.getStorageSync('userInfo').residentType != 1) {
				uni.showModal({
					title: '您不是房主，无法使用授权管理'
				})
				return
			}
			if (uni.getStorageSync('userInfo').checkStatus != 2) {
				uni.showModal({
					title: '您的审批暂未通过，无法使用此功能'
				})
			} else {
				uni.navigateTo({
					url: url
				})
			}
		}
	},

}
</script>

<style lang="scss" scoped>
.mine-container {
	.login {
		height: 200rpx;
		display: flex;
		align-items: center;
		background-color: #FF971C;
		position: relative;
		font-size: 28rpx;

		.pending,
		.rejected {
			display: block;
			position: absolute;
			border: 1rpx solid #aa0000;
			width: 100rpx;
			height: 270rpx;
			transform: rotate(-45deg) translate(100rpx, 100rpx);
			text-align: center;

		}

		.pending {
			font-size: 50rpx;
			line-height: 90rpx;
		}

		.rejected {
			font-size: 60rpx;
			line-height: 45rpx;
		}

		.avatar {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			margin-top: 4rpx;
			margin-right: 30rpx;
			margin-left: 36rpx;

			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}
		}

		.userinfo {
			color: #fff;

			.name {
				font-size: 32rpx;
			}

			.phone {
				font-size: 28rpx;
			}

			.date {
				font-size: 28rpx;
			}
		}

		.no_login {
			width: 200rpx;
			height: 70rpx;
			line-height: 70rpx;
			border: 1rpx solid #fff;
			text-align: center;
			color: #fff;
			position: absolute;
			left: 50%;
			top: 50%;
			font-size: 30rpx;
			border-radius: 20rpx;
			transform: translate(-50%, -50%);
		}

		.has_login {
			display: flex;

			.change {
				width: 128rpx;
				height: 44rpx;
				border: 1rpx solid #FFFFFF;
				border-radius: 4rpx;
				position: absolute;
				top: 100rpx;
				right: 32rpx;
				color: #fff;
				padding: 5rpx;
				font-size: 24rpx;

				&::after {
					content: '';
					position: absolute;
					right: 10rpx;
					top: 14rpx;
					width: 10rpx;
					height: 10rpx;
					border-top: 1rpx solid #fff;
					border-right: 1rpx solid #fff;
					transform: rotate(135deg);
				}
			}

			.avatar {
				// position: absolute;
				width: 121rpx;
				height: 121rpx;
				// left: 27rpx;
				// top: 13rpx;
				// z-index: 99;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 121rpx;
					height: 121rpx;
					border-radius: 50%;
				}
			}
		}
	}

	.my-nav {
		// width: 710rpx;
		// height: 216rpx;
		margin: 20rpx;
		padding-top: 20rpx;
		background: #FFFFFF;
		box-shadow: 0px 2rpx 10rpx 0px #EEEEEE;
		border-radius: 8rpx;
		padding-bottom: 20rpx;

		.nav-title {
			// width: 140rpx;
			font-size: 32rpx;
			// text-align: right;
			padding-left: 10rpx;
			border-left: 6rpx solid #4C91FF;
		}

		.nav-content {
			display: flex;

			.nav-item {
				flex: 1;
				text-align: center;

				.item-img {
					width: 52rpx;
					height: 52rpx;
					margin: 20rpx auto;
					// margin: 20rpx 96rpx 14rpx 96rpx;

					// margin-top: 20rpx;
					// margin-left: 96rpx;
					image {
						width: 52rpx;
						height: 52rpx;
					}
				}

				text {
					font-size: 24rpx;
				}
			}
		}
	}

	.info-item {
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;

		.icon-item {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
			position: relative;

			image {
				position: absolute;
				width: 40rpx;
				height: 40rpx;
			}
		}

		text {
			color: #656565;
			// font-size: 28rpx;
			font-size: 32rpx;
			flex: 1;
		}

		.arrow {
			// position: absolute;
			// top: 28rpx;
			// right: 36rpx;
			transform: rotate(45deg);
			width: 20rpx;
			height: 20rpx;
			color: #9F9F9F;
			border-top: 2rpx solid rgba(159, 159, 159, 1);
			border-right: 2rpx solid rgba(159, 159, 159, 1);
		}
	}
}
</style>
